<template>
    <div class="detail_module_panel personal_info">
        <div class="detail_panel_title detail_panel_title_icon work_student_icon">
            {{ $t('tel.userRegMobile') }}：{{ userData.phone }}
            <el-button @click="call(userData.phone)" class="btn_call_center" size="mini" type="text"
                       icon="el-icon-phone">Call
            </el-button>
            <span class="userBankNum">{{ $t('tel.receiptBankMobile') }}：{{ userData.accountPhone }}<el-button
                    @click="call(userData.accountPhone)" class="btn_call_center" size="mini" type="text"
                    icon="el-icon-phone">Call</el-button></span>
        </div>
        <el-row class="tel-personal-info">
            <!--个人信息start-->
            <el-col :span="8">
                <h2 style="line-height: 40px"><i class="el-icon-menu"><b>{{ $t('common.personalInfo') }}</b></i></h2>
                <el-row class="row">
                    <el-col class="label" :span="8">User ID</el-col>
                    <el-col class="info" :span="16">{{ userData.userId }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.name') }}</el-col><!--姓名-->
                    <el-col class="info" :span="16">{{ userData.realName }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.gender') }}</el-col><!--性别-->
                    <el-col class="info" :span="16">{{ userData.sex === '0' ? '女' : '男' }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.dateOfBirth')}}</el-col><!--出生日期-->
                    <el-col class="info" :span="20">{{ userData.sex | formatDate('yyyy-MM-dd') }}
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.education')}}</el-col><!--学历-->
                    <el-col class="info" :span="20">{{ userData.education }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.isMarried')}}</el-col><!--婚姻状况-->
                    <el-col class="info" :span="20">{{ userData.isMarried }}</el-col>
                </el-row>

                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.numberOfChildren')}}</el-col><!--子女个数-->
                    <el-col class="info" :span="20">{{ userData.isMarried }}</el-col>
                </el-row>

                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.monthlyIncome')}}</el-col><!--月收入-->
                    <el-col class="info" :span="20">{{ userData.isMarried }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.email')}}</el-col><!--邮箱-->
                    <el-col class="info" :span="20">{{ userData.isMarried }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.backupPhone')}}</el-col><!--备用号码-->
                    <el-col class="info" :span="20">{{ userData.isMarried }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.idCardType')}}</el-col><!--证件类型-->
                    <el-col class="info" :span="20">{{ userData.cardId }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.idCardNumber')}}</el-col><!--证件号码-->
                    <el-col class="info" :span="20">{{ userData.cardId }}</el-col>
                </el-row>

                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.identityNumber') }}</el-col><!--身份证号-->
                    <el-col class="info" :span="16">{{ userData.cardId }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.mobileNumber') }}</el-col><!--手机号-->
                    <el-col class="info" :span="16">{{ userData.phone }}
                        <el-button
                                v-if="userData.phone"
                                @click="call(userData.phone)"
                                class="btn_call_center"
                                size="mini"
                                type="text"
                                icon="el-icon-phone">Call
                        </el-button>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.resAddress') }}</el-col><!--居住地址-->
                    <el-col class="info" :span="16">{{ liveAddress }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.loanCardNumber') }}</el-col><!--借款卡号-->
                    <el-col class="info" :span="16">{{ userData.account }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.loanCardPhone') }}</el-col><!--借款卡预留号码-->
                    <el-col class="info" :span="16">
                        <span>{{ userData.accountPhone }}</span>
                        <el-button
                                v-if="userData.accountPhone"
                                @click="call(userData.accountPhone)"
                                class="btn_call_center"
                                size="mini"
                                type="text"
                                icon="el-icon-phone">Call
                        </el-button>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.repayCardNumber') }}</el-col><!--还款卡号-->
                    <el-col class="info" :span="16">{{ bankAccount }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.repayCardPhone') }}</el-col><!--还款卡预留号码-->
                    <el-col class="info" :span="16">{{ phone }}</el-col>
                </el-row>
            </el-col><!--个人信息end-->

            <!--联系人start-->
            <el-col :span="8">
                <h2 style="line-height: 40px"><i class="el-icon-menu"><b>{{ $t('common.contacts') }}1</b></i></h2>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.name') }}</el-col><!--姓名-->
                    <el-col class="info" :span="16">{{ userData.contactFirst }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.relationship') }}</el-col><!--关系-->
                    <el-col class="info" :span="16">{{ userData.relationshipFirst | relationship }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.mobileNumber') }}</el-col><!--手机号-->
                    <el-col class="info" :span="16">
                        {{ userData.phoneFirst }}
                        <el-button
                                v-if="userData.phoneFirst"
                                @click="call(userData.phoneFirst, userData.relationshipFirst)"
                                class="btn_call_center"
                                size="mini"
                                type="text"
                                icon="el-icon-phone">Call
                        </el-button>
                    </el-col>
                </el-row>
                <h2 style="line-height: 40px; padding-top: 20px;"><i class="el-icon-menu"><b>{{ $t('common.contacts') }}2</b></i></h2>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.name') }}</el-col><!--姓名-->
                    <el-col class="info" :span="16">{{ userData.contactSecond }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.relationship') }}</el-col><!--关系-->
                    <el-col class="info" :span="16">{{ userData.relationshipSecond | relationship }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.mobileNumber') }}</el-col><!--手机号-->
                    <el-col class="info" :span="16">
                        {{ userData.phoneSecond }}
                        <el-button
                                v-if="userData.phoneSecond"
                                @click="call(userData.phoneSecond, userData.relationshipSecond)"
                                class="btn_call_center"
                                size="mini"
                                type="text"
                                icon="el-icon-phone">Call
                        </el-button>
                    </el-col>
                </el-row>
            <!--</el-col>&lt;!&ndash;联系人end&ndash;&gt;-->
                <!--&lt;!&ndash;工作信息start&ndash;&gt;-->
                <!--<el-col :span="8">-->
                    <!--<el-row class="row">-->
                        <!--<el-col class="label" :span="8"><div class="panel_info_content_title"><i class="dot"></i>{{$t('common.workInformation')}}</div></el-col>-->
                    <!--</el-row>-->
                <h2 style="line-height: 40px"><i class="el-icon-menu"><b> {{ $t('common.workInformation') }}</b></i></h2>
                    <el-row class="row">
                        <el-col class="label" :span="8">{{$t('common.careerType')}}</el-col>
                        <el-col class="info" :span="16">{{ userData.jobType?$t('common.workTypeList.' + userData.jobType):'--' }}</el-col>
                    </el-row>
                    <!--<el-row class="row">-->
                    <!--<el-col class="label" :span="8">{{$t('common.salary')}}</el-col>-->
                    <!--<el-col class="info" :span="16">{{ userData.salary?$t('common.salaryList.' + userData.salary):'&#45;&#45;'}}</el-col>-->
                    <!--</el-row>-->
                    <!--<el-row class="row">-->
                    <!--<el-col class="label" :span="8">{{$t('common.taxNum')}}</el-col>-->
                    <!--<el-col class="info" :span="16">{{ userData.dutyParagraph }}</el-col>-->
                    <!--</el-row>-->
                    <el-row class="row">
                        <el-col class="label" :span="8">{{$t('common.corpName')}}</el-col>
                        <el-col class="info" :span="16">{{ userData.companyName }}
                            <el-button v-if="userData.companyName" @click="searchWords(userData.companyName)" type="text" icon="search" size="mini">{{ $t('common.positiveCheck') }}</el-button>
                        </el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col class="label" :span="8">{{$t('common.corpAddress')}}</el-col>
                        <el-col class="info" :span="16">{{ companyAddress }}</el-col>
                    </el-row>
                    <!--<el-row class="row">-->
                    <!--<el-col class="label" :span="8">{{$t('common.corpIndustry')}}</el-col>-->
                    <!--<el-col class="info" :span="16">{{ userData.companyIndustry }}</el-col>-->
                    <!--</el-row>-->
                    <el-row class="row">
                        <el-col class="label" :span="8">{{$t('common.currPosition')}}</el-col>
                        <el-col class="info" :span="16">{{ userData.currentPosition }}</el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col class="label" :span="8">{{$t('common.corpPhone')}}</el-col>
                        <el-col class="info" :span="16">
                            {{ userData.companyTel }}
                            <!--<hide-phone-num :phone="userData.companyTel"></hide-phone-num>&lt;!&ndash;脱敏显示电话号码&ndash;&gt;-->
                            <el-button v-if="userData.companyTel" @click="searchWords(userData.companyTel)" type="text" icon="search" size="mini">{{$t('common.negativeCheck')}}</el-button>
                            <el-button v-if="userData.companyTel" @click="$call(userData.companyTel)" class="btn_call_center" type="text" icon="el-icon-phone">Call</el-button>
                        </el-col>
                    </el-row>
                    <!--email-->
                    <!--<el-row class="row">-->
                    <!--<el-col class="label" :span="8">{{$t('common.email')}}</el-col>-->
                    <!--<el-col class="info" :span="16">{{ userData.email }}</el-col>-->
                    <!--</el-row>-->
                    <!--<el-row class="row">-->
                    <!--<el-col class="label" :span="8">{{$t('common.workingDuration')}}</el-col>-->
                    <!--<el-col class="info" :span="16">{{ userData.entryLength?$t('common.workTimeList.' + userData.entryLength):'&#45;&#45;' }}</el-col>-->
                    <!--</el-row>-->
                    <el-row class="row">
                        <el-col class="label" :span="8">{{$t('common.payDay')}}</el-col>
                        <el-col class="info" :span="16">{{ userData.payDay? ( $t('common.everyMonth') + '' + userData.payDay + ''  + $t('common.everyDay')):'--' }}</el-col>
                    </el-row>
                    <el-row class="row">
                        <el-col class="label" :span="8">{{$t('common.payInterval')}}</el-col>
                        <el-col class="info" :span="16">{{ userData.payDay? ( $t('common.everyMonth') + '' + userData.payDay + ''  + $t('common.everyDay')):'--' }}</el-col>
                    </el-row>
                </el-col><!--工作信息end-->
            <!--材料信息start-->
            <el-col :span="8">
                <h2 style="line-height: 40px"><i class="el-icon-menu"><b> {{ $t('common.materialInfo') }}</b></i></h2>
                <!--<h3 id="work_student" class="detail_panel_title detail_panel_title_icon other_info_icon">{{$t('common.materialInfo')}}</h3>-->
                <!--<div class="panel_info_content">-->
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.bankName')}}</el-col>
                    <el-col class="info" :span="20">{{ userOrderBankInfo.bankName }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.entryBankNum')}}</el-col>
                    <el-col class="info" :span="20">{{ userOrderBankInfo.account }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.getPaymentName')}}</el-col>
                    <el-col class="info" :span="20">{{ userOrderBankInfo.accountName }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.idInfoCollect')}}</el-col>
                    <el-col class="info" :span="20">
                        <ul class="imgs">
                            <li>
                                <!--身份证正面-->
                                <a @click="showImg(userData.cardPositiveImg)" :style="backgroundImg(userData.cardPositiveImg)" href="javascript:void(0);"></a>
                                <span class="img_desc">{{$t('common.idCardFrontSide')}}</span>
                            </li>
                            <li>
                                <!--手持身份证照片-->
                                <a @click="showImg(userData.cardImg)" :style="backgroundImg(userData.cardImg)" href="javascript:void(0);"></a>
                                <span class="img_desc">{{$t('common.handCardPic')}}</span>
                            </li>
                        </ul>
                    </el-col>
                </el-row>
                <!--</div>-->
            </el-col>
            <!--材料信息end-->
        </el-row>

        <show-image-video :visible.sync="showImgDialog" :video-src="videoUrl" :img-src="imgUrl">图片展示</show-image-video>
    </div>
</template>

<script>

    import ShowImageVideo from '@/components/show-image-video';
    let that = null;
    export default {
        name: 'personal-info',
        props: {
            userData: {
                type: Object
            },
            userInfo: {
                type: Object
            }
        },
        components: {
            ShowImageVideo,
        },
        data: function () {
            return {
                orderId: '',
                bankAccount: '', // 还款银行卡
                phone: '', // 还款银行卡预留手机号
                product: '',
                userId: '',
                userOrderBankInfo: {},
                showImgDialog: false,
                videoUrl: '',
                imgUrl: '',
            };
        },
        computed: {
            // 居住地址
            liveAddress() {
                return `${this.userData.province}${this.userData.city}${this.userData.district}${this.userData.address}`;
            },
            // 公司地址
            companyAddress() {
                let companyAddress = '';
                const jobInfo = this.userInfo;
                companyAddress = jobInfo.province + ' ' + jobInfo.city + ' ' + jobInfo.district + ' ' + jobInfo.address;
                return companyAddress;
            },
        },
        methods: {
            backgroundImg(url) {
                // 构造图片展示
                const style = {};
                if (url) {
                    style.backgroundImage = 'url("' + url + '")';
                }
                return style;
            },
            showImg(url, video) {
                if (video && url) {
                    this.videoUrl = url;
                    // this.videoUrl = 'http://www.w3school.com.cn/i/movie.ogg';
                    this.imgUrl = '';
                    this.showImgDialog = true;
                } else if (!video && url) {
                    this.showImgDialog = true;
                    this.imgUrl = url;
                    this.videoUrl = '';
                }
            },
            // 查询还款卡号
            queryRepayRecord() {
                const params = {
                    orderId: this.orderId
                };
                this.$api.tel.queryRepayRecord(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.bankAccount = data.bankAccount;
                        this.phone = data.phone;
                    }
                });
            },
            call(tel) {
                if (tel) {
                    const params = {
                        phone: tel,
                        product: this.product,
                        // userId: this.userId,
                        userId: this.$storage.get('user').id,
                    };
                    this.$api.callCenter.customerServiceCallOut(params).then(res => {
                        const {status, error} = res;
                        if ('1' === status && '00000000' === error) {
                            //
                        }
                    });
                }
            },
        },
        filters: {
            // 联系人关系
            relationship(val) {
                switch (val) {
                    case 'parent':
                        return '父母';
                    case 'mate':
                        return '配偶';
                    case 'brother':
                        return '兄弟';
                    case 'sister':
                        return '姐妹';
                    case 'relatives':
                        return '亲属';
                    case 'friends':
                        return '朋友';
                    case 'schoolmate':
                        return '同学';
                    case 'workmate':
                        return '同事';
                    case 'other':
                        return '其他';
                    default :
                        return '';
                }
            }
        },
        created() {
            that = this;
            if (this.$route.params.orderNid) {
                this.orderId = this.$route.params.orderNid;
                this.product = this.$route.params.addProduct;
                this.userId = this.$route.params.userId;
                this.queryRepayRecord();
            }
        }
    };
</script>

<style lang="scss" scoped>

</style>
